<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://static.vipgogo.com/year2021/common/vant2/v3/vant.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/ani.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> -->
</head>

<body>
    <div class="bg" id="app" ref="container">
        <!-- 瀑布流布局 -->
        <!-- <div class="more" @click="getlist">加载更多</div> -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div style="display: flex;justify-content: space-between;">
                    <div class="box1" id="box1">
                        <div class="list animate__animated animate__backInUp" v-for="(item,index) in datalist1"
                            :key="index">
                            <img :src="item.img" alt="">
                            <div>{{item.title}}</div>
                        </div>
                    </div>
                    <div class="box1" id="box2">
                        <div class="list animate__animated animate__backInUp" v-for="(item,index) in datalist2"
                            :key="index">
                            <img :src="item.img" alt="">
                            <div>{{item.title}}</div>
                        </div>
                    </div>
                </div>
            </van-list>
            <!-- {{one}} -->
        </van-pull-refresh>
    </div>
</body>
<script src="https://static.vipgogo.com/year2021/common/js/zepto.min.js"></script>
<script src="https://static.vipgogo.com/year2021/common/js/vue.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script src="https://static.vipgogo.com/year2021/common/vant2/v3/vant.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            data: [

            ],
            data2: [],
            datalist1: [
                // { img: './images/p1.png' },
            ],
            datalist2: [
                // { img: './images/p2.png' }
            ],
            leftH: '',
            rightH: '',
            type: '',
            loading: false,
            finished: false,
            refreshing: false,
        },
        methods: {
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                console.log(this.refreshing)
                this.onLoad();
            },
            //模拟翻页 vant 
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.data = [];
                        this.datalist1 = []
                        this.datalist2 = []
                        this.data2 = []
                        this.refreshing = false;
                    }

                    this.getlist()
                    this.loading = false;

                    if ((this.datalist1.length + this.datalist2.length) >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            // 请求数据
            getlist() {
                console.log(this.data.length)
                if (this.data.length == 0) {
                    console.log(this.data.length)

                    for (let i = 1; i <= 10; i++) {
                        this.data.push({
                            img: `./images/p${i}.png`,
                            title: '标题' + i
                        })
                    }
                    this.mountMenu()

                } else {
                    // 请求的数据单独存储在另一个变量 每次请求先清空
                    this.data2 = []
                    for (let i = 1; i <= 8; i++) {
                        this.data2.push({
                            img: `./images/p1${i}.png`,
                            title: '标题1' + i
                        })
                    }
                    console.log(this.data, this.data.length)
                    // this.data = this.data.concat(res.data.list)
                    let cs = this.data.length - this.datalist1.length - this.datalist2.length
                    //11页数
                    this.mountMenu()
                }

            },
            mountMenu(arg) {
                this.$nextTick(() => {
                    let index = arg || 0
                    this.leftH = document.getElementById('box1').offsetHeight
                    this.rightH = document.getElementById('box2').offsetHeight
                    if (this.leftH < this.rightH) {
                        this.type = 'datalist1'
                    } else if (this.leftH > this.rightH) {
                        this.type = 'datalist2'
                    } else {
                        this.type = 'datalist1'
                    }
                    //判断是初始化 还是 加载更多
                    if (this.data2.length != 0) {
                        if (this.data2.length > index) {
                            this[this.type].push(this.data2[index])
                            this.mountMenu(index + 1)
                        }
                    } else {
                        if (this.data.length > index) {
                            // this[refName].push(this.data[index])
                            this[this.type].push(this.data[index])
                            this.mountMenu(index + 1)
                        }
                    }
                })
            },


        },
        mounted() {
            // this.getlist()

            this.mountMenu()


        },
        watch: {

        },
        created() {

        }
    })
</script>

</html>